<template>
	<view>
		<!-- 页头 -->
		<view class="acc1">
			<view class="acc1-1" @click="gohome">
				<image src="../../static/img/Return arrow(2).png" mode=""></image>
			</view>
			<view class="acc1-2">
				我的账户
			</view>
			<view class="acc1-3">
				<image src="../../static/img/tongji.png" mode=""></image>
				<image src="../../static/img/shezhi.png" mode=""></image>
			</view>
		</view>
		<!-- 主体 -->
		<view class="acc2">
			<view class="acc2-1">
				借记卡
			</view>
			<view class="acc2-2" v-for="(item,index) in list" :key="index">
				<view class="" @click="goparticulars(item)">
					<view class="acc2-21">
					<view class="acc21">
						I类
					</view>
					<view class="acc22">
						{{item.hidecard}}       {{item.balance}}
					</view>
					<view class="acc23">
						<image src="../../static/img/erweima.png" mode=""></image>
					</view>
				</view>
				<view class="acc2-22">
					<view class="acc31">
						人民币可用余额        >
					</view>
					<view class="acc32">
						{{item.serial}}
					</view>
				</view>
				</view>
				<view class="acc2-23">
					<text @click="godetail">明细查询</text>
					<text @click="gozz">我要转账</text>
					<text>我要理财</text>
				</view>
			</view>
			<!-- 开通电子账户 -->
			<view class="acc2-3">
				+开通电子账户
			</view>
		</view>
	</view>
</template>

<script>
	import {myAccount} from '../../API/myAccount.js'
	export default {
		data() {
			return {
				list:[]
			}
		},
		onShow(){
			this.mymoney()
		},
		methods: {
			// 跳转卡详情
			goparticulars(aa){
				uni.navigateTo({
					url:"/pages/cardParticulars/cardParticulars?accountstatus="+aa.accountstatus+'&cardstatus='+aa.cardstatus+
					"&defaultaccount="+aa.defaultaccount+"&networkregister="+aa.networkregister+"&openbank="+aa.openbank+"&hidecard="+aa.hidecard
				})
			},
			// 返回主页
			gohome(){
				uni.switchTab({
					url:"/pages/homePage/homePage"
				})
			},
			// 跳转明细查询
			godetail(){
				uni.navigateTo({
					url:"/pages/detail/detail"
				})
			},
			// 跳转转账
			gozz(){
				uni.navigateTo({
					url:"/pages/transfer_accounts/transfer_accounts"
				})
			},
			mymoney(){
				myAccount()
					.then(res => {
						console.log(res);
						this.list=res.data.bankCards
					})
					.catch(error => {
						// 在这里处理错误
						console.error('Error:', error);
					});
			}
		}
	}
</script>

<style scoped>
.acc1{
	background-color: white;
	height: 80rpx;
	display: flex;
	justify-content:space-between;
	line-height: 80rpx;
}
.acc1 image{
	width: 50rpx;
	height: 50rpx;
}
.acc1-1{
	margin-left: 20rpx;
	margin-top: 15rpx;
}
.acc1-2{
	font-size: 40rpx;
	font-weight: 600;
	margin-left: 75rpx;
}
.acc1-3{
	margin-right: 20rpx;
	margin-top: 15rpx;
}
.acc1-3 image{
	margin-left: 15rpx;
}
.acc2{
	height: 1540rpx;
	background-color: #f7f7f7;
}
.acc2-1{
	font-size: 40rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: 600;
	margin-left: 30rpx;
}
.acc2-2{
	width: 700rpx;
	height: 330rpx;
	background-color: white;
	margin-left: 30rpx;
	border-radius: 10rpx;
}
.acc21{
	width: 70rpx;
	height: 70rpx;
	color: white;
	background-color: #FA8072;
	border-radius: 50%;
	text-align: center;
	line-height: 70rpx;
	margin-left: 30rpx;
	margin-top: 20rpx;
}
.acc22{
	font-size: 40rpx;
	margin-top: 20rpx;
	margin-left: -90rpx;
}
.acc23{
	margin-right: 20rpx;
	margin-top: 20rpx;
}
.acc23 image{
	width: 50rpx;
	height: 50rpx;
}
.acc2-21{
	display: flex;
	justify-content: space-between;
}
.acc2-22{
	display: flex;
	justify-content: space-between;
	margin-top: 50rpx;
}
.acc31{
	font-size: 33rpx;
	margin-left: 30rpx;
}
.acc32{
	font-size: 50rpx;
	font-weight: 600;
	margin-right: 30rpx;
}
.acc2-23{
	height: 100rpx;
	line-height: 100rpx;
	font-size: 35rpx;
	border-top: 1rpx solid rgba(128, 128, 128, 0.2);
	margin-top:25rpx ;
}
.acc2-23 text{
	/* margin: 0 45rpx; */
}
.acc2-23 text:nth-child(1){
	border-right: 1rpx solid rgba(120, 120, 120, 0.2);
	padding-right: 50rpx;
	padding-left: 40rpx;
}
.acc2-23 text:nth-child(2){
	border-right: 1rpx solid rgba(120, 120, 120, 0.2);
	padding-right: 50rpx;
	padding-left: 50rpx;
}
.acc2-23 text:nth-child(3){
	padding-left: 50rpx;
}
.acc2-3{
	width: 700rpx;
	height: 100rpx;
	border: 5rpx dashed #ffa200ad;
	border-radius: 15rpx;
	color: #ffa200ad;
	text-align: center;
	line-height: 100rpx;
	margin-left: 30rpx;
	margin-top: 60rpx;
	font-size: 35rpx;
}
</style>
